<template>
  <el-row>
    <el-col :span="20">
      <div class="heater-front">
        联海创智智能空气检测系统
      </div>
    </el-col>
    <el-col :span="4">
      <div class="currenttime-c">{{currentTime}}</div>

    </el-col>
  </el-row>

  <el-row>
    <el-col :span="9">
      <div>
        <div ref="chart1" style="width: 100%;height:600px;"></div>
      </div>
    </el-col>
    <el-col :span="5">
      <div>
        <div ref="chart2" style="width: 100%;height:450px;"></div>
      </div>
    </el-col>
    <el-col :span="5">
      <div>
        <div ref="chart3" style="width: 100%;height:450px;"></div>
      </div>
    </el-col>
    <el-col :span="5">
      <div>
        <div ref="chart4" style="width: 100%;height:450px;"></div>
      </div>
    </el-col>
  </el-row>

<el-row>
  <el-col :span="16">
    <div class="books" style="padding: 20px;">
      <!-- 1.搜索框 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="房间名称">
          <el-input v-model="bookname" placeholder="房间名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 2.数据表格 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="房间" width="180">
        </el-table-column>
        <el-table-column prop="bookname" label="房间二氧化碳浓度" width="180">
        </el-table-column>
        <el-table-column prop="price" label="PM值">
        </el-table-column>
        <el-table-column prop="booktype" label="二氧化碳浓度">
        </el-table-column>
      </el-table>
      <!-- 3.分页条 -->
      <div class="block" style="padding: 20px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                       :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>
  </el-col>
</el-row>
</template>

<script>
import * as echarts from 'echarts'



export default {


  data(){
    return{
      currentTime :'',
      weatcherData: {
        adcode: "",
        city: "",
        humidity: "",
        info: "",
        province: "",
        reportTime: "",
        temperature: 0,
        weather: "",
        windDirection: "",
        windPower: "",
      },

      bookname: '',
      tableData: [],
      rows:10,
      page:1,
      total:0

    }
  },

  name: 'HelloWorld',
  methods:{
    // 定义一个查询的方法，方便调用减少代码冗余
    query(params) {
      // 向后台请求数据的访问路径
      let url = this.axios.urls.BookList;
      this.axios.get(url, {
        params: params
      }).then(r => {
        console.log(r);
        this.tableData = r.data.rows;
        this.total = r.data.total;
      }).catch(e => {

      })
    },
    onSubmit() {
      let params = {
        bookname: this.bookname,

      }
      // 调用查询方法
      this.query(params);
    },
    handleSizeChange(r) { //当页大小发生变化
      // 输出查看
      console.log("当前页大小:"+r);
      let params = {
        bookname: this.bookname,
        rows:r,
        page:this.page
      }
      // 调用查询方法
      this.query(params);
    },
    handleCurrentChange(p) { //当当前页页码大小发生变化
      // 输出查看
      console.log("当前页码:"+p);
      let params = {
        bookname: this.bookname,
        page:p,
        rows:this.rows
      }
      // 调用查询方法
      this.query(params);
    },

  created() {

    // 调用查询方法
    this.query({});
  },
    updateTime() {
      const now = new Date();
      this.currentTime = now.getFullYear() + "年" +
          (now.getMonth() + 1) + "月" +
          now.getDate() + "日 " +
      now.toLocaleTimeString();
    } ,
    getCity() {
      let that = this;
      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            that.getWeather(result.city);
          }
        });
      });
    },
    // 获取天气
    getWeather(city) {
      let that = this;
      //加载天气查询插件
      AMap.plugin("AMap.Weather", function () {
        //创建天气查询实例
        let weather = new AMap.Weather();
        //执行实时天气信息查询
        weather.getLive(city, function (err, data) {
          console.log(data);
          if (data.info == "OK") {
            that.weatcherData = data;
            console.log(that.weatcherData, "天气");
          }
        });
      })
    },

    initChart(){
      // 基于准备好的dom，初始化echarts实例
     // var myChart = echarts.init(this.$refs.chart);
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }



      var myChart1 = echarts.init(this.$refs.chart1);
      var myChart2 = echarts.init(this.$refs.chart2);
      var myChart3 = echarts.init(this.$refs.chart3);
      var myChart4 = echarts.init(this.$refs.chart4);
      var option1;
      var option2;
      var option3;
      var option4;

      option1 = {
        series: [
          {
            type: 'gauge',
            progress: {
              show: true,
              width: 18
            },
            axisLine: {
              lineStyle: {
                width: 18
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: 15,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            axisLabel: {
              distance: 25,
              color: '#999',
              fontSize: 20
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 25,
              itemStyle: {
                borderWidth: 10
              }
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              fontSize: 20,
              offsetCenter: [0, '70%'],
              formatter: '室内PM ：{value}',
            },
            data: [
              {
                value: 20
              }
            ]
          }
        ]
      };

      option2 = {
        series: [
          {
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            axisLabel: {
              color: 'inherit',
              distance: 40,
              fontSize: 20
            },
            detail: {
              valueAnimation: true,
              formatter: '二氧化碳浓度 ：{value}',
              color: 'inherit' ,
              fontSize: 20,

            },
            data: [
              {
                value: 60
              }
            ]
          }
        ]
      };
      option3 = {
        series: [
          {
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            axisLabel: {
              color: 'inherit',
              distance: 40,
              fontSize: 20
            },
            detail: {
              valueAnimation: true,
              formatter: ' 甲醛 ：{value}',
              color: 'inherit',
              fontSize : 20
            },
            data: [
              {
                value: 0.02
              }
            ]
          }
        ]
      };
      option4 = {
        series: [
          {
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            axisLabel: {
              color: 'inherit',
              distance: 40,
              fontSize: 20
            },
            detail: {
              valueAnimation: true,
              formatter: ' TVOC :{value}',
              color: 'inherit',
              fontSize: 20
            },
            data: [
              {
                value: 70
              }
            ]
          }
        ]
      };
      // 绘制图表
      //myChart.setOption(option);
      myChart1.setOption(option1);
      myChart2.setOption(option2);
      myChart3.setOption(option3);
      myChart4.setOption(option4);
    }
  },
  mounted() {
    setInterval(() => {
      this.updateTime();
    }, 1000);
    this.initChart()
  }
}


</script>

<style lang="scss">
    .el-row {
      margin-bottom: 20px;
    }
    .el-row:last-child {
      margin-bottom: 0;
    }
    .el-col {
      border-radius: 4px;
    }

    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .heater-front{
      font-size: 60px;
      color: black;
      font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 5;
      text-align :center ;
    }
    .currenttime-c{
      font-size: 20px;
      color: black;
      font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 5;
      text-align :center ;
    }

</style>